import React from 'react';
import ReactDOM from 'react-dom';
import { Module } from 'react-360-web';

// import Thumbnails from './Thumbnails';

// const Loader = () => {
//   return <div className='ui-loader'>Loading</div>
// }
class Loader extends React.Component {
  render () {
    return <div className='ui-loader'>
      <div className="spinner">
        <div className="bubble-1"></div>
        <div className="bubble-2"></div>
      </div>
    </div>
  }
}

export default class LoaderModule extends Module {
  constructor(uiContainer, context) {
    super('LoaderModule');
    const div = document.createElement('div')
    div.id='loader'
    uiContainer.appendChild(div)

    this._uiContainer = div;
    console.log('context', uiContainer)
    this._ctx = context
  }

  show () {
    ReactDOM.render(
      <Loader />,
      this._uiContainer
    )
  }

  hide () {
    ReactDOM.unmountComponentAtNode(this._uiContainer)
  }
}
